<template>
	<div class="menu_five">
		<ol>
			<li v-for="item in list" :key="item.id">
				<p>
					<img :src="item.img"/>
				</p>
				<aside>
					<span>{{item.title}}</span>
					<p>{{item.txt}}</p>
					<label>￥{{item.price}}</label><a>起</a>
					<em>{{item.time}}</em>
				</aside>
			</li>
		</ol>
	</div>
</template>

<script>
	export default{
		name:'Menu_five',
		data(){
			return{
				list:[
					{id:1,img:'fiveimg/1.jpg',title:'景德镇出发',txt:'[游侠人文 • 寻窑记]景德镇专家带你认识瓷器的前世今生，面对面教学如何鉴赏瓷器之美，解读民窑和官窑的区别，亲手制作一件瓷器，一睹瓷器诞生的全工序，创意市集陶溪川3天2晚',price:'2670',time:'5天4晚'},
					{id:2,img:'fiveimg/2.jpg',title:'杭州机场',txt:'[游侠人文 • 宋韵临安梦华录]知名学者李飞老师带你循迹千年、重返南宋/汉服旅拍/寻太学/赏高宗赵构御笔石经/品宋宴/亲历宋式点茶/径山禅寺访古，做一回风雅临安人的两天',price:'1980',time:'7天6晚'},
					{id:3,img:'fiveimg/3.jpg',title:'杭州出发',txt:'[游侠人文 • 宋人的一天]知名文化学者李飞老师带你循迹千年，重返南宋/汉服旅拍/寻找900年前的太学/鉴赏高宗御笔石经/百年老店品宋宴/吴山漫步访古迹，风雅临安人的一天',price:'2850',time:'5天4晚'},
					{id:4,img:'fiveimg/4.jpg',title:'赵兴出发',txt:'[游侠人文 • 诗行浙东]特邀人文老师同行，浙东唐诗之路，会稽山、天姥山、天台山，三山来迟/炉峰禅寺/镜湖/天姥龙潭/国清寺/石梁飞瀑，用诗歌对话历史4天3晚',price:'1080',time:'4天3晚'},
					{id:5,img:'fiveimg/5.jpg',title:'杭州出发',txt:'[世界遗产在杭州 • 少数派]2-6人VIP团，聆听五千年文明（良渚深度讲解）+复刻文人墨客雅趣（泛舟西湖私域，漫步秘境）+山林隐藏玩法（遗世宿坊+径山抄经+宋代点茶）',price:'3980',time:'5天4晚'},
					{id:6,img:'fiveimg/6.jpg',title:'浙江出发',txt:'[游侠研学 • 三星堆来杭展览啦~]浙江西湖美术馆—三星堆特展/热搜中的圆头金面/20世纪人类zui伟大的考古发现之一/揭秘古蜀文明的神秘面纱，亲子半日人文课堂',price:'6522',time:'6天5晚'},
					{id:7,img:'fiveimg/7.jpg',title:'南宋出发',txt:'[中国人文图鉴·滇西摄影]8个少数民族深度人文/彝族-傈僳族-怒族-独龙族-藏族-纳西族-普米族-白族/室内环境人像/多彩民族服饰/非遗项目纪录/滇西9日环线创作之旅',price:'4980',time:'6天5晚'},
					{id:8,img:'fiveimg/8.jpg',title:'杭州出发',txt:'[游侠研学 • 浮云隐青瓷]走进南宋官窑博物馆，启发孩子寻古问今/精美研学手册/感受青瓷之美/课中游戏互动/课后艺术创作分享/专业PBL教学，宝藏博物馆亲子半日人文课堂',price:'2680',time:'5天4晚'},
					{id:9,img:'fiveimg/9.jpg',title:'行帮出发',txt:'[游侠研学 • 中华第一舟]走进跨湖桥遗址博物馆，导师风趣讲解/研学手册/了解遗址文化/世界上最早的独木舟/课中游戏互动/专业PBL教学，博物馆亲子半日人文课堂',price:'3880',time:'6天5晚'},
					{id:10,img:'fiveimg/10.jpg',title:'景德出发',txt:'[游侠研学 • 至味是清欢]走进杭帮菜博物馆，导师风趣讲解/精美研学手册/杭帮菜故事/绘制想吃的杭帮菜/课中游戏互动/课后艺术创作/专业PBL教学，博物馆亲子人文课堂半日',price:'390',time:'2天1晚'},
				]
			}
		}
	}
</script>

<style scoped>
	.menu_five{
		width: 100%;
		overflow: hidden;
		background-color: #efefef;
	}
	
	.menu_five li{
		background-color: #ffffff;
		width: 48%;
		float: left;
		margin: 1%;
		border-radius: 0.5rem;
		margin-top: 0.5rem;
	}
	.menu_five li:nth-of-type(even){
		margin-top: 1.5rem;
	}
	.menu_five p{
		text-align: center;
	}
	.menu_five li img{
		
		text-align: center;
		width: 96%;
		height: 10rem;
		border-radius: 0.5rem;
	}
	
	.menu_five aside{
		margin: 0 auto;
		width: 96%;
		position: relative;
		height: 5rem;
	
	}
	.menu_five aside span{
		width: 5rem;
		margin-left: 0.5rem;
		position: absolute;
		left:-0.5rem;
		bottom: 13.1rem;
		background-color: rgba(0,0,0,0.6);
		display: block;
		text-align: center;
		color: white;
		border-radius: 0.4rem 0 0.6rem 0;
		font-size: 0.5rem;
		line-height: 2rem;
		
	}
	.menu_five aside p{
		display: -webkit-box;
		-webkit-line-clamp: 2;/* 跟高度有关 */
		/* 超出盒子外的文本用省略号代替*/
		-webkit-box-orient: vertical;
		overflow: hidden;
		padding-top: 0.2rem;
		font-weight: bolder;
	}
	
	.menu_five aside label{
		margin-top: 1rem;
		display: inline-block;
		color: #ffa500;
		font-weight: bolder;
	}
	.menu_five aside a{
		color: #808080;
		font-size: 0.8rem;
		
	}
	.menu_five aside em{
		float: right;
		margin-top: 1.2rem;
		color: #808080;
		font-size: 0.5rem;
	}
</style>
